<template>
  <div class="article " id="list_article" >
    <el-menu :mode="'horizontal'" menu-trigger="click" class="article_menu_header" :default-active="curLabel.meta.title" >
      <el-submenu index="1" popper-class="article_menu" :popper-append-to-body="false">
        <template slot="title" v-if="curLabel.meta">{{curLabel.meta.title}}</template>
        <el-menu-item :index="item.path" v-for="(item) in menu" :key="item.meta.title">
          <router-link :to="item.path" > {{item.meta.title}}</router-link>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <p style="background-image:url(/file/cdn/article_list.jpg)" class="list_article_img"></p>
    <div class="list_article_navigation"> 

      <router-link :class="{'active' :item.path == $route.path }"  :to="item.path" v-for="(item) in menu" :key="item.meta.title">{{item.meta.title}}</router-link>
    </div>
    <div class="minwidth">
      <div class="list_article_content">
        <div class="list_article_item" v-class2="'visible'" :class="{'style1': item.active}" v-for="(item) in list" :key="item.image" @click="goToDetails(item)"> 
          <p class="list_article_item_image" >
            <a :style="'background-image:url('+utils.setCdnUrl()+item.image+')'"></a>
          </p>
          <div class="num">
            <span>{{item.first_type}}</span>
            <p>
              <span>
                <i class="iconfont icon-View_normal2"></i>{{item.view_num}}
              </span>
              <!-- <span>
                <i class="iconfont icon-Comment_normal2"></i>{{item.comment_num}}
              </span>
              <span>
                <i class="iconfont icon-givealike_normal2"></i>{{item.thumb_up_num}}
              </span> -->
            </p>
          </div>
          <p class="title">{{item.title}}</p>
          <p class="label" v-if="item.tag_type.length > 0">
            <span v-for="tag in item.tag_type" :key="tag" @click.stop="setCurTagType(tag)">{{tag}}</span>
          </p>
        </div>
        <p class="more" v-show="is_load_show" @click="getArticleScrollList()"><el-button type="search">Load More</el-button> </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { setSearchParams } from '@/utils/index.js'
import { list, get_type } from '@/api/explore/article.js'

export default {
  computed: {
    ...mapGetters(['menuArray', 'curSite', 'siteIcon', 'isPhone']),
    menu(){
      let list = this.menuArray
      let array = []
      if(list){
        for(let i =0 ;i < list.length; i++) {
          if(list[i].path == '/community'){
            array = list[i].children
          }
        }
      }
      return array
    },   
  },
  data() {
    return {
      list: [ ],
      pageSize: 12,
      tag_type: '',
      form: {
        tag_type: { value: '', op: 'like' },
        first_type : { value: '', op: '=' },
      },
      explore: [],
      is_load_show: false, //load more是否显示
      // menu: []
      curLabel: {},
      height: '',
    }
  },
  created () {
    let tag = this.$route.query.tag
    let id = this.$route.params.id
    if(tag !== id) {
      this.form.tag_type.value = tag
    }
  
    this.getArticleList()
  },
  watch: {
    $route: function() {
      this.form.tag_type.value = ''
      this.getArticleList()
      for(let i = 0; i < this.menu.length; i++){
        if(this.menu[i].path == this.$route.path){
          this.curLabel = this.menu[i]
        }
      }
    },
    menuArray (){
       for(let i = 0; i < this.menu.length; i++){
        if(this.menu[i].path == this.$route.path){
          this.curLabel = this.menu[i]
        }
      }
    },
  },
  mounted () {
    for(let i = 0; i < this.menu.length; i++){
      if(this.menu[i].path == this.$route.path){
        this.curLabel = this.menu[i]
      }
    }
    if(this.isPhone) {
      document.getElementsByClassName("rampow_content ")[0].className = 'rampow_content  isFixedChild'
    }
  },
  methods: {
    goToRelation (item) {
      if(item.association_types_name){
        this.$router.push({path: '/article/' + item.association_types_name})
      }
    },
    getType () {
      get_type().then(res => {
        let list = res
        for(let i = 0; i < list.length; i++ ) {
          list[i].path = '/explore/' + list[i].value
          list[i].meta = {
            title: list[i].value,
            hidden: false
          }
        }
        this.menu = list
      })
    },
    goToProductDetails (item) {
      this.$router.push({path: '/article/'+item.link})
    },
    goToDetails (item) {
      this.$router.push({path: '/article/'+item.link})
    },
    setCurTagType (type) {
      this.form.tag_type.value = type
      this.getArticleList()
    },
    getArticleScrollList () { //滚动加载更多
      this.page+=1
      let params = this.setParams(this.page)
      list(params).then(res=>{
        let data = res.data
        this.page = data.current_page
        let list = this.formatStringArray(data.data)
        this.list = this.list.concat(this.setActive(list)) 
        this.is_load_show = data.total - this.list.length > 0
      })
    },
    getArticleList () {
      let params = this.setParams(1)
      list(params).then(res=>{
        let data = res.data
        this.page = data.current_page
        let list = this.formatStringArray(data.data)
        this.list = this.setActive(list)
        this.is_load_show = data.total - this.list.length > 0
      })
    },
    setActive(list){
     let line = 0 // 行
      for(let i = 0; i < list.length; i++){
        line = parseInt( i/3) +1
        if(line %2 == 0  ){
          if(i% 3 == 1){
            list[i].active = true
          } else {
            list[i].active = false
          }
        } else  {
          if(line%4 == 3 && i%3 == 0){
            list[i].active = true
          }else if(line%4 == 1 && i%3 == 2){
            list[i].active = true
          }else {
            list[i].active = false
          }
        }          
      }
      return list
    },
     setParams (page) {
      this.form.first_type.value = this.$route.params.id
      let form = this.form
      let params = setSearchParams(form, this.pageSize, page)
      return params
    },
    formatStringArray(list) {
      for(let i = 0; i < list.length; i++){
        let array = []
        if (list[i].tag_type){
          let ele = list[i].tag_type.indexOf(',') > -1
          if(ele) {
            array =  list[i].tag_type.split(',')
          } else {
            array.push(list[i].tag_type)
          }
        }
        
        list[i].tag_type = array
      }
      return list 
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/explore/list.scss';
</style>